<template>
  <div class="answerOption">
    <div class="answerTitle">
      <span>答题选项</span>
      <el-button type="primary" @click="addAnswerOption">添加选项</el-button>
    </div>
    <el-row v-for="(answerItem, answerIndex) in answerOptionList" :key="answerIndex" class="answerContainer">
      <el-col :span="6">
        <label for="optionTitle" class="el-form-item__label">选项</label>
        <el-input v-model="answerItem.optionTitle" placeholder="请输入选项"></el-input>
      </el-col>
      <el-col v-if="type === 'sgbz'" :span="6">
        <label for="ratio" class="el-form-item__label">选项系数</label>
        <el-input
          v-model="answerItem.ratio"
          :min="1"
          autocomplete="off"
          onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode || event.which))) || event.which === 8"
        ></el-input>
      </el-col>
      <el-col v-if="type === 'zh'" :span="6">
        <label for="correlationQuestionsId" class="el-form-item__label">组合题</label>
        <el-select v-model="answerItem.correlationQuestionsId" v-show="type === 'zh'" filterable clearable placeholder="请选择组合题">
          <el-option
            v-for="(optionItem, optionIndex) in optionListMap.combo"
            :key="optionIndex"
            :label="optionItem.questionTitle"
            :value="optionItem.id"
          ></el-option>
        </el-select>
      </el-col>
      <el-col :span="6">
        <el-button v-if="!['sgbz', 'yxd'].includes(type)" type="primary" @click="addScoreTab(answerIndex)">+ 评分标签</el-button>
        <el-button type="danger" @click="() => answerOptionList.splice(answerIndex, 1)">删除选项</el-button>
      </el-col>
      <el-col :span="24" v-for="(labelItem, labelIndex) in answerItem.labelInfoDataList" :key="labelIndex" class="labelInfoDataList">
        <el-row>
          <el-col :span="6">
            <label for="labelType" class="el-form-item__label">标签类型</label>
            <el-select v-model="labelItem.labelType" filterable clearable placeholder="请选择标签类型">
              <el-option
                v-for="(labelTypeItem, labelTypeIndex) in optionListMap.labelType"
                :key="labelTypeIndex"
                :label="labelTypeItem.label"
                :value="labelTypeItem.value"
              ></el-option>
            </el-select>
          </el-col>
          <el-col :span="6">
            <label for="labelId" class="el-form-item__label">评分标签</label>
            <el-select
              v-model="labelItem.labelId"
              filterable
              clearable
              placeholder="请选择评分标签"
              @change="
                setOptionLabel(labelItem.labelId, labelItem, {
                  optionName: 'score',
                  fieldName: 'allLabelName',
                  value: 'allLabelRelationId',
                  label: 'allTitleName',
                })
              "
            >
              <el-option
                v-for="(scoreItem, scoreIndex) in optionListMap.score"
                :key="scoreIndex"
                :label="scoreItem.allTitleName"
                :value="scoreItem.allLabelRelationId"
              ></el-option>
              <el-option label="标签2" value="2"></el-option>
            </el-select>
          </el-col>
          <el-col :span="6">
            <label for="labelScore" class="el-form-item__label">评分分数</label>
            <el-input
              v-model="labelItem.labelScore"
              type="number"
              :min="1"
              autocomplete="off"
              onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode || event.which))) || event.which === 8"
            ></el-input>
          </el-col>
          <el-col :span="6">
            <el-button type="danger" @click="() => answerItem.labelInfoDataList.splice(labelIndex, 1)">X</el-button>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { getDataSource } from '@/static/js/dataSource';
import { SCORE_TAB } from '@/static/js/const';
import { getOptionDynamicList } from '@/api';
import { getComboQuestForLevel } from '@/api/question/store';
import cloneDeep from 'lodash/cloneDeep';
export default {
  // 答题选项
  name: 'AnswerOption',
  props: {
    type: {
      type: String,
      default: 'gt',
    },
    // 组合题组别
    groupId: {
      type: Number,
      default: 0,
    },
    optionList: {
      type: Array,
      default: () => [],
    },
  },
  computed: {
    answerOptionEditMap() {
      return getDataSource('editForm', 'answerOptionEditMap');
    },
    optionScoreEditMap() {
      return getDataSource('editForm', 'optionScoreEditMap');
    },
  },
  watch: {
    optionList: {
      handler(val) {
        this.answerOptionList = cloneDeep(val);
      },
      deep: true,
      immediate: true,
    },
    answerOptionList: {
      handler(val) {
        this.$emit('update:answerOptionList', val);
        this.$emit('changeOptionList', val);
      },
      deep: true,
    },
  },
  data() {
    return {
      answerOptionList: [],
      optionListMap: {},
    };
  },
  created() {
    // 请求所有组合题
    if (this.type === 'zh') {
      getComboQuestForLevel(this.groupId).then((res) => {
        this.optionListMap.combo = res.rows;
      });
    }
    // 添加标签类型
    this.optionListMap.labelType = SCORE_TAB;
    // 获取得分标签
    getOptionDynamicList({
      apiKey: 'AllTwoLabelOption',
      params: {},
      methods: 'get',
    }).then((res) => {
      this.optionListMap.score = res.rows;
    });
  },
  methods: {
    setOptionLabel(val, row, { optionName, fieldName, value, label }) {
      const optionItem = this.optionListMap[optionName].find((item) => item[value] === val) || {};
      this.$set(row, fieldName, optionItem[label]);
    },
    addAnswerOption() {
      this.answerOptionList.push({
        labelInfoDataList: [],
      });
    },
    addScoreTab(index) {
      if (!this.answerOptionList[index].labelInfoDataList) {
        this.$set(this.answerOptionList[index],  'labelInfoDataList', [])
      }
      this.answerOptionList[index].labelInfoDataList.push({});
      console.log(this.answerOptionList[index])
    },
  },
};
</script>
<style lang="scss" scoped>
.answerOption {
  padding: 30px 0;
  border-top: 1px solid #c0c4cc;
  .answerTitle {
    span {
      font-size: 14px;
      color: #606266;
      font-weight: bold;
      display: inline-block;
      width: 130px;
      text-align: right;
      padding-right: 15px;
      &::before {
        content: '*';
        margin-right: 8px;
        color: #ff4949;
      }
    }
  }
  .answerContainer {
    margin-top: 10px;
    & ::v-deep .el-select,
    & ::v-deep .el-input {
      width: calc(100% - 130px);
    }
    & ::v-deep .el-form-item__label {
      width: 130px;
    }
    & ::v-deep .el-select .el-input {
      width: 100%;
    }
    & ::v-deep .el-col .el-button:first-child {
      margin-left: 20px;
    }
    .labelInfoDataList {
      margin-top: 10px;
    }
  }
}
</style>
